<template>
  <!-- 用户-用户分组 -->
      <div>
          <Card :bordered="false" dis-hover class="ivu-mt">
            <div class="new_card_pd">
		        <Form
		                ref="groupFrom"
		                inline
		                :model="groupFrom"
		                :label-width="labelWidth"
		                :label-position="labelPosition"
		                @submit.native.prevent
		        >
				
		            <FormItem label="角色：">
		                <Select
		                        v-model="groupFrom.role_id"
		                        placeholder="请选择"
		                        clearable
		                        class="input-add"
								@on-change="operationSearchs"
		                >
		                    <Option v-for="(item,index) in role_list" :value="item.type">{{item.name}}</Option>
		                </Select>
		            </FormItem>
                    <FormItem label="门店：">
		                <Select
		                        v-model="groupFrom.store_id"
		                        placeholder="请选择"
		                        clearable
		                        class="input-add"
								@on-change="operationSearchs"
		                >
		                    <Option v-for="(item,index) in store_list" :value="item.id">{{item.name}}</Option>
		                </Select>
		            </FormItem>
		            <FormItem label="姓名：">
		                <Input
		                        v-model="groupFrom.name"
		                        placeholder="请输入姓名手机号"
		                         class="input-add mr14"
		                />
		                <Button class="mr14" @click="operationSearchs" type="primary">查询</Button>
						<Button @click="reset">重置</Button>
		            </FormItem>
		        </Form>
		    </div>
              <!-- 相关操作 -->
              <Row type="flex">
                  <Col v-bind="grid">
                      <Button  type="primary" @click="add">添加</Button>
                  </Col>
              </Row>
              <!-- 用户分组表格 -->
              <Table :columns="columns1" :data="groupLists" ref="table" class="mt25"
                     :loading="loading" highlight-row
                     no-userFrom-text="暂无数据"
                     no-filtered-userFrom-text="暂无筛选结果">
                  <template slot-scope="{ row, index }" slot="icons">
                      <viewer>
                          <div class="tabBox_img">
                              <img v-lazy="row.icon">
                          </div>
                      </viewer>
                  </template>
                  <template slot-scope="{ row, index }" slot="avatar_url">
                      <img :src="row.avatar_url" style="width: 50px;height:50px;border-radius:50%" alt="">
                  </template>
                  <template slot-scope="{ row, index }" slot="action">
                      <a @click="edit(row.id)">修改</a>
                      <Divider type="vertical" />
                      <a @click="del(row,'删除分组',index)">删除</a>
                  </template>
              </Table>
              <div class="acea-row row-right page">
                  <Page :total="total" show-elevator show-total @on-change="pageChange"
                        :page-size="groupFrom.limit"/>
              </div>
          </Card>
      </div>
  </template>
  
  <script>
      import { mapState } from 'vuex';
      import { userGroupApi, groupAddApi } from '@/api/user';
      import { operationList, addApi ,editApi,get_store_list,get_role_list} from '@/api/operation';
      export default {
          name: "user_operation",
          data() {
              return {
                  grid: {
                      xl: 7,
                      lg: 7,
                      md: 12,
                      sm: 24,
                      xs: 24
                  },
                  loading: false,
                  columns1: [
                      {
                          title: 'ID',
                          key: 'id',
                          width: 80
                      },
                      {
                          title: '头像',
                          slot: 'avatar_url',
                          key: 'avatar_url',
                          minWidth: 150
                      },
                      {
                          title: '姓名',
                          key: 'user_name',
                          minWidth: 200
                      },
                      {
                          title: '身份',
                          key: 'role_text',
                          minWidth: 200
                      },
                      {
                          title: '电话',
                          key: 'phone',
                          minWidth: 200
                      },
                      {
                          title: '工作年限',
                          key: 'experience_years',
                          minWidth: 200
                      },
                      {
                          title: '星座',
                          key: 'zodiac_sign',
                          minWidth: 200
                      },
                      {
                          title: '账户余额',
                          key: 'balance',
                          minWidth: 200
                      },
                      {
                          title: '累计余额',
                          key: 'total_balance',
                          minWidth: 200
                      },
                      {
                          title: '冻结金额',
                          key: 'freeze_balance',
                          minWidth: 200
                      },
                      {
                          title: '操作',
                          slot: 'action',
                          fixed: 'right',
                          minWidth: 120,
                          maxWidth: 140
                      }
                  ],
                  groupFrom: {
                      page: 1,
                      limit: 10,
                      role_id:'',
                      store_id:''
                  },
                  groupLists: [],
                  store_list : [],
                  role_list : [],
                  total:0
              }
          },
          computed: {
              ...mapState('admin/layout', [
                  'isMobile'
              ]),
              labelWidth () {
                  return this.isMobile ? undefined : 75;
              },
              labelPosition () {
                  return this.isMobile ? 'top' : 'left';
              }
          },
          created () {
              this.getList();
              this.init_data();
          },
          methods:{
              init_data(){
                get_store_list().then(res=>{
                    this.store_list = res.data
                })
                get_role_list().then(res=>{
                    this.role_list = res.data
                })
              },
              // 添加
              add () {
                  this.$modalForm(addApi()).then(() => this.getList());
              },
              // 分组列表
              getList () {
                  this.loading = true;
                  operationList(this.groupFrom).then(async res => {
                      let data = res.data;
                      this.groupLists = data.list;
                      this.total = data.count;
                      this.loading = false;
                  }).catch(res => {
                      this.loading = false;
                      this.$Message.error(res.msg);
                  })
              },
              pageChange (index) {
                  this.groupFrom.page = index;
                  this.getList();
              },
              operationSearchs(){
				this.groupFrom.page = 1;
				this.getList();
			},
			reset(){
				this.formValidate = {
				  page: 1,
				  limit: 20,
				  name:'',
				  store_id:'',
				  role_id:''
				};
				this.getList();
			},
              //修改
              edit(id){
                  this.$modalForm(editApi(id)).then(() => this.getList());
              },
              // 删除
              del (row, tit, num) {
                  let delfromData = {
                      title: tit,
                      num: num,
                      url: `user/operation/delete/${row.id}`,
                      method: 'DELETE',
                      ids: ''
                  };
                  this.$modalSure(delfromData).then((res) => {
                      this.$Message.success(res.msg);
                      this.groupLists.splice(num, 1);
                      if (!this.groupLists.length) {
                        this.groupFrom.page =
                            this.groupFrom.page == 1 ? 1 : this.groupFrom.page - 1;
                      }
                      this.getList();
                  }).catch(res => {
                      this.$Message.error(res.msg);
                  });
              },
          }
      }
  </script>